<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rect_circle_ellipse</title>
</head>
<body style="display:flex;gap: 50px;">
    <div> 
        <div> 文本  text-anchor: 描点,默认是start=左下角,middle=中下,end=右下</div> 
        <svg width="400" height="120">
            <rect width="400" height="120" fill="#eee"/>
            <text x="310" y="75" font-size="35" fill="red" text-anchor="end">I love SVG!</text>
            <circle cx="310" cy="75" r="10" stroke="black" stroke-widht="3" fill="red"/>
            <text x="310" y="75" font-size="20" fill="black" dx="20" dy="20">描点</text>
        </svg>
        
        <div> 文本 旋转 transform="rotate(30 20,40)" 30顺时针旋转角度,与x轴的夹角,  20,40旋转点坐标</div> 
        <svg width="400" height="220">
            <rect width="400" height="220" fill="#eee"/>
            <text x="270" y="75" font-size="35" fill="red" text-anchor="end" transform="rotate(30 0,0)">I love SVG!</text> 
        </svg>
        <div> 文本 tspan</div> 
        <svg width="400" height="120">
            <rect width="400" height="120" fill="#eee"/>
            <text x="110" y="0" fill="red"  transform="rotate(30 0,0)">
                I love SVG!
                <tspan x="110" y="20">First line</tspan>
                <tspan x="110" y="40">First line</tspan>
            </text> 
        </svg>

        
        <div>文本添加链接</div> 
        <svg width="400" height="120" xmlns:xlink="http://www.w3.org/1999/xlink">
            <rect width="400" height="120" fill="#eee"/>
            <a xlink:href="http://www.baidu.com" target="_blank">
                <text x="110" y="0" fill="red"  transform="rotate(30 0,0)">
                    百度链接1
                    <tspan x="110" y="30">百度链接2</tspan>
                    <tspan x="110" y="50">百度链接3</tspan>
                </text> 
            </a>
        </svg>
    </div> 
</body>
</html>